<template>
  <div class="filter-bar" :style="{height: height}">
    <div class="_left">
      <slot name="left-bar"></slot>
    </div>
    <div class="_right">
      <slot name="right-bar"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterBar',
  props: {
    height: {
      type: String,
      default: '40px'
    },
  },
}
</script>

<style scoped lang="less">
  .filter-bar{
    position: relative;
    top: -10px;
    width: 100%;
    height: 40px;
    margin-right: 10px;
    background-color: #fff;
    // line-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ._left{
    display: flex;
    align-items: center;

  }
  ._right{
    float: right;
  }
</style>
